<script setup lang="ts">
import { ref, onMounted, reactive, computed } from 'vue';
import { NextLoading } from '/@/utils/loading';
import { ElMessage } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import { Session } from '/@/utils/storage';
import { verifyPhone } from '/@/utils/toolsValidate';
import { useLoginApi } from '/@/api/login.js';

// 定义变量内容
const route = useRoute();
const router = useRouter()

const lxsAppData = reactive({
	loading: {
		signIn: false,
	},
	loginData: {
		code: '',
		mobile: '', // 手机号码
		password: '', // 密码
	},
	captchaData: { // 验证码数据
		btnTip: '获取验证码', // 验证码提示
		time: 60, // 时长
		flag: 0, // 是否点击
	},
	tips: {
		mobile: '', // 手机号码
		password: '', // 密码
	}
})

const passLight = ref(false); // 密码是否显示
// 点击密码显示隐藏
const passLightClick = () => {
	passLight.value = passLight.value == false;
}

// 切换登录
const emits = defineEmits(['switchType'])
const loginShow = (param: any) => {
	emits('switchType', param);
}

//点击回车键登录
const keyDown = (e) => {
	console.log('点击回车键登录', e)
	if (e.keyCode == 13 || e.keyCode == 100) {
		loginPassword()
	}
}

// input输入验证
const handleInput = (type: string) => {
	if (type == 'mobile') {
		lxsAppData.tips.mobile = verifyPhone(lxsAppData.loginData.mobile) ? '' : '手机号格式不正确';
		return;
	} else if (type == 'password') {
		lxsAppData.tips.password = lxsAppData.loginData.password.length < 6 || lxsAppData.loginData.password.length > 20 ? '密码长度为6-20位' : '';
		return;
	}
}

// 密码登录
const loginPassword = async () => {
	if (!verifyPhone(lxsAppData.loginData.mobile)) {
		lxsAppData.tips.mobile = '手机号格式不正确'
		return;
	} else {
		lxsAppData.tips.mobile = ''
	}
	if (lxsAppData.loginData.password.length < 6 || lxsAppData.loginData.password.length > 20) {
		lxsAppData.tips.password = '密码长度为6-20位'
		return;
	} else {
		lxsAppData.tips.password = ''
	}
	lxsAppData.loading.signIn = true;
	try {
		await useLoginApi().passwordLoginSubmit(lxsAppData.loginData).then(data => {
			console.log('登录结果', data);
			if (data.code === 200) {
				Session.set('token', data.data.token);
				// Session.set('userInfo', data.data.user_info);
				signInSuccess(data.message)
			} else {
				lxsAppData.loading.signIn = false;
				ElMessage.error(data.message)
				return;
			}
		})

	} catch (e) {
		lxsAppData.loading.signIn = false;
		console.log(e);
	}
}

// 登录成功后的跳转
const signInSuccess = (message: string) => {
	// 登录成功，跳到转首页
	// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
	if (route.query?.redirect) {
		router.push({
			path: route.query?.redirect,
			query: Object.keys(route.query?.params).length > 0 ? JSON.parse(route.query?.params) : '',
		});
	} else {
		router.push('/');
	}
	// 登录成功提示
	ElMessage.success(message);
	// 添加 loading，防止第一次进入界面时出现短暂空白
	NextLoading.start();
	lxsAppData.loading.signIn = false;
};
</script>

<template>
	<form class="login-form" @keyup.native.enter="keyDown">
		<div>
			<div class="login-animation">
				<el-input class="el-input" placeholder="请输入手机号" @input="handleInput('mobile')" v-model="lxsAppData.loginData.mobile" autocomplete="off">
					<template #prefix>
						<img style="width: 20px; height: 20px;" src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/login/%E6%89%8B%E6%9C%BA.png" alt="">
					</template>
				</el-input>
			</div>
			<view class="form-tips" v-if="lxsAppData.tips.mobile !== ''">
				<p>{{ lxsAppData.tips.mobile }}</p>
			</view>
		</div>

		<div>
			<div class="login-animation">
				<el-input class="el-input" :type="passLight ? 'text' : 'password'" placeholder="请填写密码" @input="handleInput('password')" v-model="lxsAppData.loginData.password" autocomplete="off">
					<template #prefix>
						<img style="width: 20px; height: 20px;" src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/login/%E5%AF%86%E7%A0%81.png" alt="">
					</template>
				</el-input>


				<img v-if="passLight" class="pass-light" src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/login/View_alt_light.png" alt="" @click="passLightClick">
				<img v-else class="pass-light" src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/login/View_hide_light.png" alt="" @click="passLightClick">
			</div>
			<view class="form-tips" v-if="lxsAppData.tips.password !== ''">
				<p>{{ lxsAppData.tips.password }}</p>
			</view>
		</div>

		<div class="login-change">
			<p @click="loginShow(2)">切换验证码登录</p>
			<span @click="loginShow(4)">忘记密码?</span>
		</div>

		<div class="mt30">
			<el-button class="login-submit" @click="loginPassword" :loading="lxsAppData.loading.signIn">登录</el-button>
		</div>
	</form>
</template>

<style scoped lang="scss">

</style>